import React, { useState } from "react";
import ThreeScene from "./three";
import { NavBar, Space, Toast } from 'antd-mobile'
import { AppstoreOutline, CloseOutline, DownOutline, LeftOutline, MoreOutline, RightOutline, SearchOutline, UpOutline } from 'antd-mobile-icons'
import styles from './three.module.css'


import Right from './assets/right.jpg';
import Left from './assets/left.jpg';
import TopImg from './assets/top.jpg';
import BottomImg from './assets/bottom.jpg';
import BackImg from './assets/back.jpg';
import FrontImg from './assets/front.jpg';
import Right1 from './assets/right1.jpg';
import Left1 from './assets/left1.jpg';
import TopImg1 from './assets/top1.jpg';
import BottomImg1 from './assets/bottom1.jpg';
import BackImg1 from './assets/back1.jpg';
import FrontImg1 from './assets/front1.jpg';
import { useNavigate } from "react-router-dom";

const App: React.FC = () => {
    const [index, setIndex] = useState(0);
    const [isShow, setIsShow] = useState(false);
    const navigate = useNavigate();

    const imageSets = [
        [
            Right,
            Left,
            TopImg,
            BottomImg,
            BackImg,
            FrontImg,
        ],
        [
            Right1,
            Left1,
            TopImg1,
            BottomImg1,
            BackImg1,
            FrontImg1,
        ],
    ];


    const back = () => {
        navigate(-1);

    }

    return (
        <div style={{ width: "100%", height: "100vh" }}>
            <NavBar onBack={back}>全景看房</NavBar>
            <ThreeScene imgList={imageSets[index]} />
            <div>
                <div className={styles.footer}>
                    <div>
                        <LeftOutline style={{ fontSize: 24, margin: 10 }} onClick={() => setIndex((prev) => (prev - 1) % imageSets.length)} />
                        <AppstoreOutline style={{ fontSize: 24, margin: 10 }} onClick={() => setIsShow(!isShow)} />
                    </div>
                    <div>
                        <RightOutline style={{ fontSize: 24, margin: 10 }} onClick={() => setIndex((prev) => (prev + 1) % imageSets.length)} />
                    </div>
                </div>
            </div>
            {isShow === true &&
                <div className={styles.bottom}>
                    <img src={FrontImg} alt="front" onClick={() => setIndex((prev) => (prev - 1) % imageSets.length)} />
                    <img src={FrontImg1} alt="front1" onClick={() => setIndex((prev) => (prev + 1) % imageSets.length)} />
                </div>
            }
        </div>
    );
};

export default App;